<script setup lang="tsx">
defineOptions({
  name: "checkLogs"
});

import { ref, computed } from "vue";
import { queryOperationLogsData } from "@/api/modules/operation";
import commonTable from "@/views/common/components/commonTable/index.vue";
import ReTextTooltip from "@/components/ReTextTooltip";
import { useFormatJSON2Array } from "./hooks";

const commonTableRef = ref<CommonTable.TableRefType>(null);

const tableCloumns = [
  {
    label: "操作日期",
    prop: "operTime",
    width: 100
  },
  {
    label: "操作类型",
    prop: "businessType",
    width: 60,
    render({ row }: any) {
      //  1=新增,2=修改,3=删除    0 未知
      const s = new Map([
        [0, "未知"],
        [1, "新增"],
        [2, "修改"],
        [3, "删除"]
      ]);
      return () => s.get(row?.businessType ?? 0) || "未知";
    }
  },
  {
    label: "操作人员",
    prop: "operName",
    width: 100
  },
  {
    label: "修改内容",
    prop: "operParam",
    width: 400,
    showOverflowTooltip: false,
    render({ row }: any) {
      const arr = useFormatJSON2Array(props.type, row?.operParam);
      const arr2 = arr?.map(item => {
        const { label, value } = item;
        return `${label}：${value}`;
      });
      const str = arr2?.join("； ");
      return () => (str ? <ReTextTooltip content={str} maxWidth="400px" /> : "--");
    }
  }
];

const props = withDefaults(defineProps<{ title?: string; type?: string }>(), { title: "", type: "" });

const dialogVisible = defineModel({ type: Boolean, default: false });

const params = computed(() => ({ title: props.type }));
</script>

<template>
  <px-dialog v-model="dialogVisible" :title="`${title ? title : type}操作日志`" width="1200px">
    <commonTable ref="commonTableRef" immediate :tableCloumns="tableCloumns" :height="500" :axiosApi="queryOperationLogsData" :params="params" />
    <template #footer>
      <span>
        <px-button type="primary" @click="dialogVisible = false"> 确定 </px-button>
      </span>
    </template>
  </px-dialog>
</template>
